<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto group space-y-40">
			<view class="flex-col justify-start relative group_2">
				<view class="flex-row items-center section_3 space-x-26" v-if="member_id!=''" @click="toDetail">
					<image class="image_6" :src="content.avatar_path" />
					<view class="flex-col items-start flex-auto space-y-19">
						<text class="text_4">{{content.nickname}}</text>
						<view class="flex-row justify-center section_4 space-x-11">
							<image class="image_7" src="/static/vip1.png" />
							<text class="text_5">Lv{{content.vip}}</text>
						</view>
						<text class="font_2 text_6">编号：{{content.member_sn}}</text>
					</view>
				</view>
				<view class="flex-row items-center section_3 space-x-26" v-else @click="toLogin">
					<image class="image_6" src="/static/head.png" />
					<view class="flex-col items-start flex-auto space-y-19">
						<text class="text_4">登录/注册</text>
					</view>
				</view>
				<view class="flex-row items-center section_5 space-x-16 pos_4" @click="toVip">
					<image class="shrink-0 image_8" src="/static/vip2.png" />
					<view class="flex-row justify-between items-center flex-auto section_6">
						<text class="text_7">{{content.vip&&content.vip!=0?'尊享会员':'开通加入尊享会员'}}</text>
						<view class="flex-row items-center group_3 space-x-17">
							<text class="font_2 text_8" v-if="content.vip&&content.vip!=0">{{content.vip_expire}}</text>
							<text class="font_2 text8" v-else>加入会员</text>
							<image class="shrink-0 image_9" src="/static/more2.png" />
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col group_4">
				<view class="flex-row">
					<view class="flex-row justify-center items-center section_7 equal-division-item space-x-24" @click="toWallet">
						<image class="image_10" src="/static/wallet.png" />
						<view class="flex-col items-start group_5 space-y-25">
							<text class="font_3">我的钱包</text>
							<text class="font_4 text_9">{{content.balance}}余额</text>
						</view>
					</view>
					<view class="flex-row justify-center items-center section_8 equal-division-item space-x-24" @click="toSettleIn">
						<image class="image_10" src="/static/distribution.png" />
						<view class="flex-col items-start group_5 space-y-25">
							<text class="font_3">推荐中心</text>
							<text class="font_4 text_10">查看更多</text>
						</view>
					</view>
				</view>
				<view class="flex-col section_9">
					<text class="self-start font_3 text_11">常用功能</text>
					<view class="flex-row equal-division group_6">
						<view class="flex-col items-center group_7 equal-division-item_2 space-y-16" @click="toCollect">
							<image class="image_11" src="/static/collect.png" />
							<text class="font_2">我的收藏</text>
						</view>
						<view class="flex-col items-center group_8 equal-division-item_2 space-y-16" @click="toMessage">
							<image class="image_11" src="/static/message.png" />
							<text class="font_2">站内消息</text>
						</view>
						<view class="flex-col items-center group_8 equal-division-item_2 space-y-16" @click="show=true">
							<image class="image_11" src="/static/service.png" />
							<text class="font_2">联系客服</text>
						</view>
						<view class="flex-col items-center group_8 equal-division-item_2 space-y-16" @click="toSetUp">
							<image class="image_11" src="/static/setUp.png" />
							<text class="font_2">系统设置</text>
						</view>
					</view>
				</view>
			</view>
			<u-popup :show="show" :round="10" :closeable="false" mode="center" @close="show=false">
				<view class="popup">
					<image src="/static/qrcodeImg.png" class="card" show-menu-by-longpress="true" mode=""></image>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	let member_id = ref('')
	let content = ref({})
	let read = ref('')
	let statusNum = ref({})
	let show = ref(false)
	let list = ref([])

	onShow(() => {
		// uni.setStorageSync('member_id',9)
		console.log(uni.getStorageSync('member_id'),'member_id');
		if (uni.getStorageSync('member_id')) {
			member_id.value = uni.getStorageSync('member_id')
			getDate()
		} else {
			member_id.value = ''
		}
		if (uni.getStorageSync('account_id')) {
			// getDate1()
		}
	})
	const getDate = () => {
		proxy.$req.requestPOST(proxy.$api.CenterInfo.getInfo,{
			member_id:uni.getStorageSync('member_id')
		}).then(res => {
			if (res.flag == "success") {
				content.value = res.data
				let url =content.value.avatar_path.split('com/')
				content.value.avatar_path ='https://libc-ddanm.bujufangshi.com/'+ url[1]
			}
		})
		// proxy.$req.requestPOST(proxy.$api.CenterInfo.orderStat).then(res => {
		// 	if (res.flag == "success") {
		// 		statusNum.value = res.data
		// 	}
		// })
	}
	const getDate1 = () => {
		proxy.$req.requestPOST(proxy.$api.WorkerCenterInfo.noRead).then(res => {
			if (res.flag == "success") {
				read.value = res.data.count
			}
		})
	}
	const toLogin = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}

	const toDetail = () => {
		uni.navigateTo({
			url: '/pages/mineDetail/mineDetail'
		})
	}
	const toCollect = () => {
		if (!uni.getStorageSync('member_id')) {
			uni.showToast({
				title: "请先登录！",
				icon: 'none'
			})
			setTimeout(() => {
				toLogin()
			}, 1000)
			return
		}
		uni.navigateTo({
			url: '/pages/collect/collect'
		})
	}
	const toWallet = () => {
		if (!uni.getStorageSync('member_id')) {
			uni.showToast({
				title: "请先登录！",
				icon: 'none'
			})
			setTimeout(() => {
				toLogin()
			}, 1000)
			return
		}
		uni.navigateTo({
			url: '/pages/wallet/wallet'
		})
	}
	const toMessage = () => {
		if (!uni.getStorageSync('member_id')) {
			uni.showToast({
				title: "请先登录！",
				icon: 'none'
			})
			setTimeout(() => {
				toLogin()
			}, 1000)
			return
		}
		uni.navigateTo({
			url: '/pages/message/message'
		})
	}
	
	const toVip = () => {
		if (!uni.getStorageSync('member_id')) {
			uni.showToast({
				title: "请先登录！",
				icon: 'none'
			})
			setTimeout(() => {
				toLogin()
			}, 1000)
			return
		}
		uni.navigateTo({
			url: '/pages/vipDetail/vipDetail'
		})
	}
	
	const toSettleIn = () => {
		if (!uni.getStorageSync('member_id')) {
			uni.showToast({
				title: "请先登录！",
				icon: 'none'
			})
			setTimeout(() => {
				toLogin()
			}, 1000)
			return
		}
		if (content.value.vip!=1) {
			uni.showToast({
				title: "您还不是vip！",
				icon: 'none'
			})
			return
		}
		uni.navigateTo({
			url: '/pages/distribution/distribution'
		})
	}
	const toCenter = () => {
		if (!uni.getStorageSync('account_id')) {
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/settleLogo/settleLogo'
				})
			}, 1000)
			return
		}
		uni.navigateTo({
			url: '/pages/business/business'
		})
	}
	const toSetUp = () => {
		uni.navigateTo({
			url: '/pages/setUp/setUp'
		})
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
		button {
			border: 0 !important;
			outline: none !important;
			// margin: 0 !important;
			// padding: 0 !important;
			background-color: #fff !important;
		}
		
		button::after {
			border: 0 !important;
			height: 100% !important;
		}
		.group {
			padding-bottom: 7rpx;

			.group_2 {
				padding-bottom: 9rpx;

				.section_3 {
					padding: 40rpx 30rpx 134rpx;
					background-color: #54bc6e;
					background-image: linear-gradient(0deg, #f8f8f8 0%, #eff5f0 100%);

					.image_6 {
						width: 166rpx;
						height: 166rpx;
						border-radius: 50%;
					}

					.space-y-19 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-top: 19rpx;
						}

						.text_4 {
							color: #3e4975;
							font-size: 40rpx;
							font-family: PingFangSC;
							line-height: 38rpx;
						}

						.section_4 {
							padding: 8rpx 15rpx 8rpx 19rpx;
							background-color: #fff5e6;
							border-radius: 18rpx;
							width: 104rpx;

							.image_7 {
								width: 22rpx;
								height: 20rpx;
							}

							.text_5 {
								color: #ff9b26;
								font-size: 24rpx;
								font-family: PingFangSC;
								line-height: 18rpx;
							}
						}

						.space-x-11 {

							&>view:not(:first-child),
							&>text:not(:first-child),
							&>image:not(:first-child) {
								margin-left: 11rpx;
							}
						}

						.text_6 {
							color: #86888c;
						}
					}
				}

				.space-x-26 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 26rpx;
					}
				}

				.section_5 {
					padding-left: 32rpx;
					background-color: #ffff00;
					background-image: linear-gradient(90deg, #fee9bb 0%, #f6dcac 100%),
						linear-gradient(45deg, #f0ddb6 0%, #f6e7cf 100%),
						linear-gradient(165deg, #f6e0b8 0%, #fdcb78 50%, #f9d38c 100%),
						linear-gradient(88deg, #fff2e9 0%, #ffcfab 50%, #d19f75 100%),
						linear-gradient(165deg, #fef9ef 0%, #ffdeb9 50%, #d19f75 100%),
						linear-gradient(165deg, #fef9ef 0%, #d19f75 100%);
					border-radius: 20rpx;

					.image_8 {
						width: 58rpx;
						height: 53rpx;
					}

					.section_6 {
						padding: 30rpx 0;
						border-radius: 0px 20rpx 20rpx 0px;
						background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/65289a27ce83440011a2c3ab/16971889172326808404.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;
						height: 95rpx;

						.text_7 {
							color: #512c19;
							font-size: 28rpx;
							font-family: PingFangSC;
							line-height: 27rpx;
						}

						.group_3 {
							margin-right: 30rpx;

							.text_8 {
								color: #ad6540;
								line-height: 22rpx;
							}
							.text8 {
								color: #512C19;
								line-height: 22rpx;
							}
							.image_9 {
								width: 34rpx;
								height: 34rpx;
							}
						}

						.space-x-17 {

							&>view:not(:first-child),
							&>text:not(:first-child),
							&>image:not(:first-child) {
								margin-left: 17rpx;
							}
						}
					}
				}

				.space-x-16 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 16rpx;
					}
				}

				.pos_4 {
					position: absolute;
					left: 30rpx;
					right: 30rpx;
					top: 254rpx;
				}
			}

			.group_4 {
				padding: 0 30rpx;

				.section_7 {
					flex: 1 1 334rpx;
				}

				.equal-division-item {
					padding: 40rpx 32rpx;
					background-color: #ffffff;
					border-radius: 30rpx;
					height: 159rpx;
				}

				.space-x-24 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 24rpx;
					}
				}

				.section_8 {
					flex: 1 1 334rpx;
					margin-left: 22rpx;
				}

				.image_10 {
					width: 59.5rpx;
					height: 55rpx;
				}

				.group_5 {
					width: 188rpx;

					.font_4 {
						font-size: 26rpx;
						font-family: PingFangHeiTC;
						line-height: 25rpx;
					}

					.text_9 {
						color: #ff3333;
					}

					.text_10 {
						color: #999999;
					}
				}

				.space-y-25 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 25rpx;
					}
				}

				.section_9 {
					margin-top: 30rpx;
					padding: 40rpx 0 29rpx;
					background-color: #ffffff;
					border-radius: 30rpx;

					.text_11 {
						margin-left: 32rpx;
					}

					.equal-division {
						margin-top: 33rpx;

						.group_7 {
							width: 150rpx;
							// flex: 1 1 161rpx;
						}

						.equal-division-item_2 {
							padding: 8rpx 0;
						}

						.space-y-16 {

							&>view:not(:first-child),
							&>text:not(:first-child),
							&>image:not(:first-child) {
								margin-top: 16rpx;
							}
						}

						.group_8 {
							width: 150rpx;
							// flex: 1 1 161rpx;
							margin-left: 16rpx;
						}

						.image_11 {
							width: 48rpx;
							height: 48rpx;
						}
					}

					.group_6 {
						padding: 0 22rpx;
					}
				}

				.font_3 {
					font-size: 32rpx;
					font-family: PingFangSC;
					line-height: 31rpx;
					color: #333333;
				}
			}
		}

		.space-y-40 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 40rpx;
			}
		}

		.tab-bar {
			background-color: #ffffff;
			border-top: solid 2rpx #f6f6f6;

			.section_10 {
				flex: 1 1 250rpx;
				padding: 8rpx 0 12rpx;
				background-color: #ffffff;
				height: 100rpx;

				.image_12 {
					width: 54rpx;
					height: 54rpx;
				}

				.font_5 {
					font-size: 24rpx;
					font-family: PingFangHeiTC;
					line-height: 23rpx;
					color: #54bc6e;
				}

				.text_12 {
					color: #4ec200;
				}

				.text_13 {
					line-height: 22rpx;
				}
			}

			.space-y-4 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 4rpx;
				}
			}
		}

		.font_2 {
			font-size: 24rpx;
			font-family: PingFangHeiTC;
			line-height: 23rpx;
			color: #333333;
		}
	}
	.popup{
		width: 500rpx;
		height: 500rpx;
		background-color: #fff;
		border-radius: 30rpx;
		.card{
			width: 100%;
			height: 100%;
			border-radius: 30rpx;
		}
	}
</style>